<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Title Page</title>
    <link rel="stylesheet" href="../../../bootstrap.css" />
    <script src="../../../ajax.js"></script>
  </head>
  <body>
    <h3 class="text-center">test data spring boot for 楠哥</h3>
    <div id="app">
      <table class="table table-hover table-bordered">
        <thead>
          <tr class="success">
            <th v-for="(item,index) in book.title" :key="index">{{ item }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in book.list" :key="item.bookid">
            <td>{{ item.bookid }}</td>
            <td>{{ item.catalogid }}</td>
            <td>{{ item.bookname }}</td>
            <td>{{ item.price }}</td>
          </tr>
        </tbody>
      </table>
      <nav aria-label="...">
        <ul class="pagination">
          <li class="disabled">
            <a href="#" aria-label="Previous"
              ><span aria-hidden="true">&laquo;</span></a
            >
          </li>
          <li class="active">
            <a href="#">1 <span class="sr-only">(current)</span></a>
          </li>
          ...
        </ul>
      </nav>
    </div>
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script>
    <script>
      let vm = new Vue({
        el: "#app",
        data: {
          book: {},
        },
        methods: {
          async getBooks() {
            let resRaw = await ajax("http://localhost:8181/book/findAll/1/4");
            let res = resRaw.replace(/bookid/g, "书籍编号");
            res = res.replace(/catalogid/g, "书籍分类");
            res = res.replace(/bookname/g, "书籍名称");
            res = res.replace(/price/g, "书籍价格");
            this.$set(this.book, "list", JSON.parse(resRaw).content);
            let title = [];
            for (const key in JSON.parse(res).content[0]) {
              title.push(key);
            }
            this.$set(this.book, "title", title);
            console.log(this.book);
          },
        },
        created() {
          this.getBooks();
        },
      });
      // window.onload = async function () {
      //   let resRaw = await ajax("http://localhost:8181/book/findAll");
      //   let res = resRaw.replace(/bookid/g, "书籍编号");
      //   res = res.replace(/catalogid/g, "书籍分类");
      //   res = res.replace(/bookname/g, "书籍名称");
      //   res = res.replace(/price/g, "书籍价格");
      //   vm.$set(vm.book, "list", JSON.parse(resRaw));
      //   let title = [];
      //   for (const key in JSON.parse(res)[0]) {
      //     title.push(key);
      //   }
      //   vm.$set(vm.book, "title", title);
      // };
    </script>
  </body>
</html>
